<template>
  <div class="container-fluid m-0 p-0" :class="[vdata.onpc?'skills-pc':'skills-ph']">
    <van-tabs type="card" background="black" color="green" sticky>
      <van-tab title="技能列表">
        <span style="color:white">技能列表(共{{Object.keys(dictskill).length}}项技能)(潜能:{{this.gdata.data.pbase.Pot}})</span>
        <table class="table table-bordered table-sm table-dark m-0 p-0">
          <thead>
            <tr>
              <th v-for="(skilltitle) of this.titleskill" :key=skilltitle>{{skilltitle}}</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(valueskill, keyskill) of this.dictskill" :key=keyskill class="m-0 p-0">
              <td>{{valueskill.Id}}</td>
              <td>{{valueskill.Level}}</td>
              <td :style="{color:skillleveldesc(valueskill.Level).Color}">{{skillleveldesc(valueskill.Level).Desc}}</td>
              <td>{{skillleveluppot(valueskill.Level)}}</td>
              <td>
                <button :class=btnlevelupclass(valueskill.Level) :disabled=btnlevelupdisable(valueskill.Level) :name=valueskill.Id @click=onlevelup($event)>升级</button>
              </td>
            </tr>
          </tbody>
        </table>
      </van-tab>
      <van-tab title="技能应用">
        <table class="table table-bordered table-sm table-dark m-0 p-0">
          <thead>
            <tr>
              <th v-for="(usagetitle) of this.titleusage" :key=usagetitle>{{usagetitle}}</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(valueusage, keyusage) of this.dictusage" :key=keyusage class="m-0 p-0">
              <td>{{valueusage.Usage}}</td>
              <td>{{valueusage.Level}}</td>
              <td>
                <el-select :name=valueusage.Usage v-model="valueusage.Skill" class="m-0 p-0" style='height:30px;width:100%' @change=elonusagechange($event)>
                  <el-option v-for="(elusageselect) of elusagetypelist(valueusage.Usage)" :key=elusageselect.skill :value=elusageselect>{{elusageselect.skill}}</el-option>
                </el-select>
              </td>
            </tr>
          </tbody>
        </table>
      </van-tab>
    </van-tabs>
    <button type="button" class="btn btn-info btn-block" v-on:click="onclose">关闭</button>
  </div>
</template>

<script>

export default {
  data: function () {
    return {
      vdata: this.gdata.data,
      dictskill: {},
      dictusage: {},
      titleusage: ['应用类别', '有效等级', '应用技能'],
      titleskill: ['名称', '等级', '描述', '升级潜能', '升级']
    }
  },
  components: {
  },
  methods: {
    elonusagechange: function (event) {
      var req = this.wsreq('C2G_SKILL_USAGEUSE')
      req.Usage = event.usage
      req.Skill = event.skill
      this.wssend(req)
    },
    elusagetypelist: function (usage) {
      var result = [{ usage: usage, skill: '无' }]
      for (var skillname in this.dictskill) {
        var conf = this.conf.ConfigSkill[skillname]
        if (typeof (conf) !== 'undefined') {
          if (conf.Usage.includes(usage)) {
            result.push({ usage: usage, skill: skillname })
          }
        }
      }
      return result
    },
    onlevelup: function (event) {
      var req = this.wsreq('C2G_SKILL_LEVELUP')
      req.SkillId = event.srcElement.name
      this.wssend(req)
    },
    skillleveldesc: function (level) {
      var desclv = parseInt(level / 10)
      if (desclv < 0) {
        desclv = 0
      }
      if (desclv > 50) {
        desclv = 50
      }
      return this.conf.ConfigSkillDesc[desclv]
    },
    skillleveluppot: function (level) {
      var lv = level + 1
      return (lv * lv)
    },
    btnlevelupclass: function (level) {
      var disable = this.btnlevelupdisable(level)
      return (disable ? 'btn-secondary' : 'btn-success') + (this.vdata.onpc ? '' : ' btn-sm') + ' btn btn-block p-0 m-0'
    },
    btnlevelupdisable: function (level) {
      var pot = this.skillleveluppot(level)
      return (this.gdata.data.pbase.Pot < pot)
    },
    onclose: function (event) {
      this.$parent.vclose()
    },
    G2C: function (pid, rsp, success, result) {
      switch (pid) {
        case 'G2C_SKILL_LIST':
          this.dictskill = rsp.DictSkill
          this.dictusage = rsp.DictUsage
          break
        case 'G2C_SKILL_LEVELUP':
          this.dictskill[rsp.SkillId] = rsp.Skill
          this.jxwdtextmud('你的#HIC#' + rsp.SkillId + '#NOR#进步了！')
          break
        case 'G2C_SKILL_USAGEUSE':
          this.dictusage = rsp.DictUsage
          if (rsp.Skill === '无') {
            this.jxwdtextmud('你取消使用#HIY#' + rsp.Usage + '#NOR#！')
          } else {
            this.jxwdtextmud('你使用#HIC#' + rsp.Skill + '#NOR#作为#HIY#' + rsp.Usage + '#NOR#！')
          }
          break
        default:
          // 这里是没有找到对应的值处理
          break
      }
    }
  },
  computed: {
  }
}
</script>

<style scoped>
.skills-pc {
  font-size: 15px;
}
.skills-ph {
  font-size: 10px;
  margin: 0px;
  padding: 0px;
}
</style>
